<template>
  <div class="table-tab-body-container">
    <div class="operator-area">
      <a-button type="primary" @click="handleReload">刷新数据</a-button>
    </div>
    <div class="table-main">
      <a-table
        rowKey="id"
        bordered
        :key="tableSetting.key"
        :columns="tableColumns"
        :loading="tableSetting.loading"
        :dataSource="tableDataSource"
        :pagination="false"
        :scroll="{ y: 600 }"
        :rowSelection="{
          selectedRowKeys: tableSetting.selectedRowKeys,
          onChange: onTabalRowChange
        }">
      </a-table>
    </div>
  </div>
</template>

<script>
import { userList, getUserList } from '@/mock/mock-data'

export default {
  name: 'SimpleTable',
  data() {
    return {
      tableSetting: {
        key: +new Date(),
        loading: false,
        pagination: {},
        selectedRowKeys: [],
        editingRecordIndex: ""
      },
      tableDataSource: [],
      tableColumns: [
        {
          title: '序号',
          width: 65,
          align: "center",
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: "姓名",
          dataIndex: "name",
          align: "left"
        },
        {
          title: "年龄",
          dataIndex: "age",
          width: 80,
          align: "center"
        },
        {
          title: "学历",
          dataIndex: "education",
          align: "center",
          width: 80
        },
        {
          title: "分数",
          dataIndex: "score",
          align: "center",
          width: 80
        },
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: 100,
          customRender: (text, record, index) => {
            return text == 1 ? '异常' : '正常'
          }
        },
        {
          title: "是否锁定",
          dataIndex: "isLock",
          align: "center",
          width: 100,
          customRender: (text, record, index) => {
            return text == 1 ? '锁定' : '正常'
          }
        },
        {
          title: "家庭住址",
          dataIndex: "address",
          ellipsis: true,
          align: "left",
        },
        {
          title: "出生日期",
          dataIndex: "birthday",
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          align: "center",
        },
      ]
    }
  },
  mounted () {
    this.tableDataSource = userList.values
    
  },
  methods: {
    /** 表格前置选中框选择 */
    onTabalRowChange (selectedRowKeys) {
      this.tableSetting.selectedRowKeys = selectedRowKeys;
    },
    handleReload () {
      const list = getUserList()
      console.log("list", list)
      this.tableDataSource = getUserList()
      console.log('list', JSON.stringify(this.tableDataSource))
    }
  },
}
</script>

<style lang="scss" scoped>
.table-tab-body-container {
  height: 100%;
  overflow: auto;
}
</style>